import Component from './Component';
import List from './List';

export interface IInputOptions {
  wrapperEl: HTMLElement;
  placeholderText: string;
  buttonText: string;
}

class Input extends Component {
  private _options: IInputOptions;

  constructor(options: IInputOptions) {
    super();
    this._options = options;
  }

  public render() {
    const { placeholderText, buttonText } = this._options;

    //在本组件里给传进来的容器新增内容 如input 和 button
    this._options.wrapperEl.innerHTML += Component.inputView(
      placeholderText,
      buttonText
    );
  }

  public bindEvent() {
    //增加按钮
    const oAddBtn: HTMLElement = document.querySelector('.add-btn');
    //输入框
    const oInput: HTMLElement = document.querySelector('.todo-input');

    oAddBtn.addEventListener(
      'click',
      this._handleBtnClick.bind(this, oInput),
      false
    );
  }

  private _handleBtnClick(inputDom) {
    const val: string = inputDom.value.trim();

    //输入框有内容时
    if (val.length) {
      //将内容传入List组件里
      List.addItem(val);

      inputDom.value = '';
    }
  }
}

export default Input;
